<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>校园跑腿</title>
    <meta name="description" content="校园跑腿"/>
    <meta name="keywords" content="校园跑腿"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/amazeui.min.js"></script>
    <script type="text/javascript" src="/js/application.js"></script>
    <style>
        body {
            background-color: #FCFCFC;
        }

        dl,
        dd {
            margin: 0;
        }

        #box {
            width: 850px;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 10px rgba(73,66,66,.1);
            margin: 50px auto;
            border: 1px solid #E5E5E5;
        }

        #box dl {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px dashed #dadada;
            margin: 0 20px;
        }

        #box dt {
            float: left;
            color: #8a8a8a;
        }

        #box dd {
            float: left;
            color: #252525;
            margin: 0 10px;
            font-size: 14px;
            cursor: pointer;
        }

        #box dd.active {
            color: #c4284d;
            font-weight: bold;
        }

        #box dl.select {
            background: #efefef;
            margin: 0;
            padding: 0 20px;
        }

        #box dl.select dd{
            border: 1px solid #c4284d;
            height: 25px;
            line-height: 25px;
            margin-top: 13px;
            padding: 0 2px 0 10px;
            border-radius: 3px;background-color: #fff;
        }
        #box dl.select dd span{
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            line-height: 20px;
            background: #c4284d;
            color: #fff;
            margin-left: 10px;
            cursor: pointer;border-radius: 5px;
        }
        .popup-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        .popup-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        .field-container {
            margin-bottom: 10px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }

        .field-container label {
            display: block;
            font-weight: bold;
        }

        .field-container input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .confirm-button {
            background-color: #ccc;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }

        .confirm-button:hover {
            background-color: #6b6969;
        }

        .confirm-button:focus {
            outline: none;
        }
        .close-button {
            background-color: #ccc;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }

        .close-button:hover {
            background-color: #6b6969;
        }

        .close-button:focus {
            outline: none;
        }
        .success-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10px 20px;
            background-color: rgba(76, 175, 80, 0.8);
            color: white;
            border-radius: 4px;
            opacity: 1;
            transition: opacity 1s ease-in-out;
        }

        .success-message.fade-out {
            opacity: 0;
        }
    </style>
</head>
<body>
<header data-am-widget="header" class="am-header am-header-default header">
    <div class="am-header-left am-header-nav">
        <a href="/user/mypage" class="">
            <i class="am-header-icon am-icon-angle-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">返费<a href="#title-link" class="" style="color: #333;">我的抢单</a></h1>
    <div class="am-header-right am-header-nav">
        <a href="#right-link" class=""> </a>
    </div>
</header>

<ul class="order-style">
    <li class="current"><a href="/order/myordergrabbing">全部</a></li>
    <li><a href="/order/Runorderinprogress">进行中</a></li>
    <li><a href="/order/Runordercompleted">已完成</a></li>
    <li><a href="/order/Runordercanceled">已取消</a></li>
</ul>
<script>
    function getBillUserInfo(event, href) {
        event.preventDefault();
        var orderid = null;
        var result = '';

        if (href.includes('order')) {
            var lastIndex = href.lastIndexOf("/");
            result = href.substr(lastIndex + 1);
            orderid = result.split('&')[1];
            result = result.split('&')[0];
        } else {
            orderid = result.split('&')[1];
            result = result.split('&')[0];
        }

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/user/get_userInfo?UserID=" + result, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var user = JSON.parse(xhr.responseText);

                var popupContainer = document.createElement('div');
                popupContainer.classList.add('popup-container');

                var form = document.createElement('form');
                form.classList.add('popup-form');

                var closeButton = document.createElement('button');
                closeButton.classList.add('close-button');
                closeButton.innerHTML = '×';

                var confirmButton = document.createElement('button');
                confirmButton.classList.add('confirm-button');
                confirmButton.innerHTML = '联系';

                form.appendChild(closeButton);
                form.appendChild(confirmButton);

                var fieldConfig = [
                    { label: '账号', property: 'userId' },
                    { label: '姓名', property: 'userName' },
                    { label: '电话号码', property: 'phoneNumber' },
                ];

                fieldConfig.forEach(function(field) {
                    var fieldContainer = document.createElement('div');
                    fieldContainer.classList.add('field-container');

                    var fieldLabel = document.createElement('label');
                    fieldLabel.textContent = field.label;

                    var fieldValue = document.createElement('input');
                    fieldValue.setAttribute('type', 'text');
                    fieldValue.setAttribute('readonly', 'true');
                    fieldValue.value = user[field.property];

                    fieldContainer.appendChild(fieldLabel);
                    fieldContainer.appendChild(fieldValue);

                    form.appendChild(fieldContainer);
                });

                popupContainer.appendChild(form);
                document.body.appendChild(popupContainer);

                closeButton.addEventListener('click', function() {
                    document.body.removeChild(popupContainer);
                });

                confirmButton.addEventListener('click', function(event) {
                    event.preventDefault();
                    // 创建接单成功消息框
                    var successMessage = document.createElement('div');
                    successMessage.textContent = '联系成功！';
                    successMessage.classList.add('success-message');
                    popupContainer.appendChild(successMessage);



                    // 添加 CSS 类以实现渐隐效果
                    setTimeout(function() {
                        successMessage.classList.add('fade-out');
                    }, 1000);

                    // 延迟一段时间后跳转到指定页面
                    setTimeout(function() {
                        window.location.replace('/order/myordergrabbing');
                        // window.location.href = '/order/inprogress';
                    }, 2000);
                });
            }
        };
        xhr.send();
    }

</script>

<div class="c-comment-list" style="border: 0;">
    <div th:each="orderForm:${orderFormList}">
        <div class="c-comment">
            <span class="c-comment-num">订单编号：<span th:text="${orderForm.orderId}"/></span>
            <span class="c-comment-suc" th:if="${orderForm.orderStatus == 0}">已取消</span>
            <span class="c-comment-suc" th:if="${orderForm.orderStatus == 3}">进行中</span>
            <span class="c-comment-suc" th:if="${orderForm.orderStatus == 4}">已完成</span>
        </div>
        <a class="o-con" href="content.html">
            <div class="am-intro-left am-u-sm-3"><img src="/img/p.png"/></div>
            <div class="o-con-txt">
                <span th:text="${orderForm.type}"></span>
                <p style="color: gray;margin-top: 2px;font-size: 12px"><span th:text="${orderForm.billTime}"/></p>
                <span style="color: gray;margin-top: 2px;font-size: 12px" th:text="${orderForm.deadLine}"></span>
                <p class="price" style="font-size: 14px"><span th:text="${orderForm.remark}"/></p>
            </div>
        </a>

        <div class="c-com-btn">
            <a th:href="${orderForm.getBillUser().getUserId()}" th:if="${orderForm.orderStatus == 3}" onclick="getBillUserInfo(event,this.href)">联系发单人</a>
            <a th:href="@{/order/deleteRunorder(orderid=${orderForm.getOrderId()})}" th:if="${orderForm.orderStatus == 3}">取消订单</a>
        </div>


    </div>
</div>
</body>
</html>
